<template>
	<div>
		<sh-card title="基础用法" class="mb-3">
			<sh-progress :percent="25" />
			<sh-progress :percent="45" status="active" />
			<sh-progress :percent="65" status="wrong" />
			<sh-progress :percent="100" />
			<sh-progress :percent="25" hide-info />
		</sh-card>
		<sh-card title="百分比内显" class="mb-3">
			<sh-progress :percent="25" :stroke-width="20" text-inside />
			<sh-progress :percent="45" :stroke-width="20" status="active" text-inside />
			<sh-progress :percent="65" :stroke-width="20" status="wrong" text-inside />
			<sh-progress :percent="100" :stroke-width="20" text-inside />
		</sh-card>
		<sh-card title="垂直方向" class="mb-3">
			<sh-progress vertical :percent="25" />
			<sh-progress vertical :percent="45" status="active" />
			<sh-progress vertical :percent="65" status="wrong" />
			<sh-progress vertical :percent="100" />
			<sh-progress vertical :percent="25" hide-info />
		</sh-card>
		<sh-card title="自定义更多样式" class="mb-3">
			<sh-progress :percent="25" :stroke-width="5" />
			<sh-progress :percent="100">
				<sh-icon type="checkmark-circled"></sh-icon>
				<span>成功</span>
			</sh-progress>
		</sh-card>
		<sh-card title="渐变色" class="mb-3">
			<sh-progress :percent="90" :stroke-color="['#108ee9', '#87d068']" />
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseProgress',
	data() {
		return {}
	}
}
</script>

<style scoped lang="scss"></style>
